<template>
  <div v-if="record.status == 4 && record.deliveryStatus === 'delivered'">
    <CheckCircleOutlined style="font-size: 30px;color: #3cb556"/>
    <div>
      {{record.pkgStatus}}
    </div>
  </div>
  <div v-if="record.status == 3">
    <svg t="1741147143332" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4603" width="30" height="30"><path d="M422.144 929.728l-185.472 49.664L162.88 736H96v-512h256l576-160v832L384 736h-22.336l60.48 193.728z m-140.16-28.736l61.824-16.576-48.384-148.416H229.184l52.8 164.992zM864 152.96l-448 117.12v419.776l448 117.184V152.96z m-512 135.04h-192v337.792-35.008V672h192v-384z" fill="#1296db" p-id="4604"></path></svg>
    <div>
      {{record.pkgStatus}}
    </div>
  </div>
  <div v-if="record.status == 0">
    <StopOutlined style="font-size: 30px;color: #d30a0a"/>
    <div>
      {{record.pkgStatus}}
    </div>
  </div>
  <div v-if="record.status == 4 && record.deliveryStatus == 'canceled'">
    <ExclamationCircleOutlined style="font-size: 30px;color: #e68919"/>
    <div>
      {{record.pkgStatus}}
    </div>
  </div>
  <div v-if="record.status == 4 && (!['canceled','delivered'].includes(record.deliveryStatus))">
    <svg t="1741147325755" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5762" data-spm-anchor-id="a313x.search_index.0.i5.3b453a81t7cZQ5" width="30" height="30"><path d="M361.58593 732.14976h302.01856c5.03808 0 9.15456-4.11648 9.15456-9.15456v-96.09216c0-5.02784-4.11648-9.15456-9.15456-9.15456h-45.76256c-5.03808 0-9.15456 4.12672-9.15456 9.15456v41.18528H416.50305v-41.18528c0-5.02784-4.12672-9.15456-9.15456-9.15456h-45.76256c-5.02784 0-9.14432 4.12672-9.14432 9.15456v96.09216c0 5.03808 4.11648 9.15456 9.14432 9.15456z m388.9664-140.70784c0 25.27232 20.49024 45.76256 45.76256 45.76256 25.27232 0 45.76256-20.49024 45.76256-45.76256 0-25.27232-20.48-45.76256-45.76256-45.76256-25.27232 0-45.76256 20.49024-45.76256 45.76256z m273.41824-191.744l-27.10528-47.36c-2.51904-4.352-8.12032-5.8368-12.47232-3.31776l-57.99936 33.86368-89.57952-247.33696c-9.728-30.32064-37.86752-50.7904-69.67296-50.7904H271.44321c-39.70048 0-74.92608 25.63072-87.17312 63.488L98.91969 382.99648l-58.112-33.86368c-4.34176-2.51904-9.95328-1.024-12.47232 3.31776L1.21985 399.69792c-2.5088 4.352-1.024 9.84064 3.31776 12.35968l69.09952 40.27392-16.5888 45.76256a32.642048 32.642048 0 0 0-2.05824 11.43808V907.8784c0 17.96096 13.49632 32.49152 30.08512 32.49152h77.34272c14.06976 0 26.30656-10.63936 29.2864-25.50784l8.8064-43.13088h624.16896l8.8064 43.13088c3.09248 14.86848 15.21664 25.50784 29.2864 25.50784h77.34272c16.5888 0 30.08512-14.53056 30.08512-32.49152V509.52192c0-3.8912-0.68608-7.77216-2.05824-11.43808l-16.5888-45.76256 68.97664-40.27392a9.13408 9.13408 0 0 0 3.44064-12.34944zM887.82977 518.22592v271.12448H137.36065V518.22592l17.84832-49.19296h714.77248l17.84832 49.19296zM261.71521 176.27136l0.57344-1.4848 0.4608-1.4848c1.25952-3.77856 4.68992-6.2976 8.69376-6.2976h489.17504l86.26176 237.95712H178.54593l83.16928-228.68992z m-78.592 415.17056c0 25.27232 20.49024 45.76256 45.76256 45.76256 25.27232 0 45.76256-20.49024 45.76256-45.76256 0-25.27232-20.48-45.76256-45.76256-45.76256-25.27232 0-45.76256 20.49024-45.76256 45.76256z m0 0" fill="#1296db" p-id="5763"></path></svg>
    <div>
      {{record.pkgStatus}}
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  record:{
    type:Object,
    required:true
  }
})
</script>
<style scoped>

</style>
